<template>
<div>
  <el-table
    :data="tableData2"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120">
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="300">
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120">
      </el-table-column>
      <el-table-column label="月份">
        <el-table-column prop="test1" label="1月"></el-table-column>
        <el-table-column prop="test2" label="2月"></el-table-column>
          <!--
            <el-table-column 
              :prop="tableData2[0].months[0].data"
              :label="tableData2[0].months[0].title">
            </el-table-column>
          -->

          <!--
            <template slot-scope="scope">
              <span v-for='(item, itemIndex) in scope.row.months' :key="itemIndex">{{item.data}}</span>
            </template>
          -->
          <template v-for="i in 12">
            <el-table-column 
              :key="i"
              :label="`${i}月`"
              >
              <template slot-scope="scope">
                <span>{{scope.row.months[i-1].data}}</span>
              </template>
            </el-table-column>
          </template>
            
          
          
      </el-table-column>
    </el-table-column>
  </el-table>

</div>
</template>

<script>
  export default {
    data() {
      return {
        tableData1: {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          test1: 'test1',
          test2: 'test2',
          months:[
            {title: '1月', data: 123},
            {title: '2月', data: 123},
            {title: '3月', data: 123},
            {title: '4月', data: 123},
            {title: '5月', data: 123},
            {title: '6月', data: 123},
            {title: '7月', data: 123},
            {title: '8月', data: 123},
            {title: '9月', data: 123},
            {title: '10月', data: 123},
            {title: '11月', data: 123},
            {title: '12月', data: 123},
          ]
        },

      }
    },
    computed: {
        tableData2() {
          let arr = []
          for (let i = 0; i < 8; i++) {
            arr.push(this.tableData1)
          }
          return arr
        }
      }
  }
</script>

<style lang="" scoped>
</style>